@if (label() || tooltip()) {
  <ix-label
    [label]="label()"
    [tooltip]="tooltip()"
    [required]="required()"
    [ixTestOverride]="controlDirective.name || ''"
  ></ix-label>
}

<div
  class="input-container"
  [class.disabled]="isDisabled"
  [class.readonly]="readonly()"
>
  @if (prefixIcon()) {
    <span class="prefix-icon">
      <ix-icon [name]="prefixIcon()"></ix-icon>
    </span>
  }
  <input
    #ixInput
    #trigger="matAutocompleteTrigger"
    matInput
    [class.prefix-padding]="prefixIcon()"
    [class.password-field]="isPasswordField()"
    [class.has-reset-input-icon]="shouldShowResetInput()"
    [required]="required()"
    [readonly]="readonly()"
    [disabled]="isDisabled"
    [type]="getType()"
    [value]="formatted"
    [autocomplete]="autocomplete()"
    [maxLength]="maxLength()"
    [matAutocomplete]="auto"
    [placeholder]="placeholder()"
    [ixTest]="controlDirective.name"
    [attr.aria-label]="label()"
    (input)="input(ixInput)"
    (focus)="focus(ixInput)"
    (blur)="blurred()"
  />

  @if (shouldShowResetInput()) {
    <span class="reset-input">
      <ix-icon name="mdi-close-circle" (click)="resetInput(ixInput)"></ix-icon>
    </span>
  }

  @if (type() === 'password') {
    <button
      mat-icon-button
      type="button"
      class="toggle_pw"
      [ixTest]="['toggle-password', controlDirective.name]"
      [attr.aria-label]="showPassword ? ('Hide Password' | translate) : ('Show Password' | translate)"
      (click)="onPasswordToggled()"
      (keydown.enter)="$event.stopPropagation()"
    >
      @if (showPassword) {
        <ix-icon
          name="visibility"
          [matTooltip]="'Hide' | translate"
        ></ix-icon>
      } @else {
        <ix-icon
          name="visibility_off"
          [matTooltip]="'Show' | translate">
        </ix-icon>
      }
    </button>
  }

  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected($event.option.value)">
    @if (filteredOptions?.length) {
      @for (option of filteredOptions; track trackByIdentity(option)) {
        <mat-option
          class="option"
          [value]="option"
          [ixTest]="[controlDirective.name, option.value]"
        >
          {{ option.label | translate }}
        </mat-option>
      }
    }
  </mat-autocomplete>
</div>

@if (invalid) {
  <div>
    <mat-error>
      <div [innerHTML]="invalidMessage()"></div>
    </mat-error>
  </div>
}

@let control = controlDirective.control;
@if (control) {
  <ix-errors [control]="control" [label]="label()"></ix-errors>
}

@if (hint()) {
  <mat-hint>{{ hint() }}</mat-hint>
}
